<template>
  <v-container>
    <div style="display:flex;flex-direction:column">
        <div style="display:flex;flex-direction:row;align-items:center;font-size:20px;font-weight:bold;margin-left:50px;margin-top:40px;margin-bottom:40px"><img src="@/assets/logobit.png">
        <span style="margin-right:20px;margin-left:20px;color:red"> |</span>
        这是一个评论</div>
        <div style="display:flex;flex-direction:row;align-items:center;justify-content: space-around">
        <div style="margin-top:10px;justify-content: space-around"><img src="@/assets/subBanner2.jpg" alt="" width="400px" height="200px"> </div>
        <div style="font-size:20px;color:green;align-items:center;margin-bottom:40px">
          <v-card elevation="2"> 
            <template style="padding:10px">
              <v-tabs slider-color=" red">
                <v-tab >点赞</v-tab>
              
                <v-tab>评论</v-tab>
                <v-tab>其他</v-tab>
              </v-tabs>
              <v-text-field style="display:flex;flex-direction:column;margin-top:30px"
                label="请输入评论"
                outlined
              ></v-text-field>
              <v-text-field style="display:flex;flex-direction:column"
                label="回复评论"
                outlined
              ></v-text-field>
                <v-checkbox
                  v-model="checkbox1"
                  label="是否匿名"
                ></v-checkbox>
                <v-btn style="margin-left:50px;margin-right:50px;color:green"
                  elevation="2"                  
                >
                点赞
                </v-btn>
                <v-btn style="margin-right:30px;color:red"
                  elevation="2"                  
                >
                点踩
                </v-btn>
            </template>
          </v-card>
          </div>
        </div>

      
    </div>
    </v-container>
</template>

<script>
  export default {
    name: 'HelloWorld',

    data: () => ({
      ecosystem: [
        {
          text: 'vuetify-loader',
          href: 'https://github.com/vuetifyjs/vuetify-loader',
        },
        {
          text: 'github',
          href: 'https://github.com/vuetifyjs/vuetify',
        },
        {
          text: 'awesome-vuetify',
          href: 'https://github.com/vuetifyjs/awesome-vuetify',
        },
      ],
      importantLinks: [
        {
          text: 'Documentation',
          href: 'https://vuetifyjs.com',
        },
        {
          text: 'Chat',
          href: 'https://community.vuetifyjs.com',
        },
        {
          text: 'Made with Vuetify',
          href: 'https://madewithvuejs.com/vuetify',
        },
        {
          text: 'Twitter',
          href: 'https://twitter.com/vuetifyjs',
        },
        {
          text: 'Articles',
          href: 'https://medium.com/vuetify',
        },
      ],
      whatsNext: [
        {
          text: 'Explore components',
          href: 'https://vuetifyjs.com/components/api-explorer',
        },
        {
          text: 'Select a layout',
          href: 'https://vuetifyjs.com/getting-started/pre-made-layouts',
        },
        {
          text: 'Frequently Asked Questions',
          href: 'https://vuetifyjs.com/getting-started/frequently-asked-questions',
        },
      ],
    }),
  }
</script>
